<template>
    <div class="ApiInfo">
      <zh-card shadow="hover" style="height:600px">
        <zh-header-toolbar v-if="!props.displayFlag">
          <zh-button v-if="activeName == 'baseInfo'" style="margin-left: 8px" button-type="save" @click="apiUpdate">保存</zh-button>
          <zh-button v-if="activeName == 'reqInfo'||activeName == 'resInfo'" style="margin-left: 8px" button-type="add" @click="apiRootAdd">根目录新增</zh-button>
          <zh-button v-if="activeName == 'reqInfo'||activeName == 'resInfo'" style="margin-left: 8px" button-type="add" @click="apiEqualAdd">同级新增</zh-button>
          <zh-button v-if="activeName == 'reqInfo'||activeName == 'resInfo'" style="margin-left: 8px" button-type="add" @click="childApiAdd">子集新增</zh-button>
          <zh-button v-if="activeName == 'reqInfo'||activeName == 'resInfo'" style="margin-left: 8px" button-type="save" @click="saveApi">保存修改</zh-button>
          <zh-button v-if="activeName == 'reqInfo'||activeName == 'resInfo'" style="margin-left: 8px" button-type="del" @click="deleteApiParams">删除节点</zh-button>
        </zh-header-toolbar>
        <el-tabs v-model="activeName" :stretch="true" style="height: 100%">
          <el-tab-pane label="基础信息" name="baseInfo" style="height:600px">
            <api-form ref="apiBasePage" :displayFlag="props.displayFlag" scroll-height="60vh"/>
          </el-tab-pane>
          <el-tab-pane label="入参信息" name="reqInfo" style="height:600px">
            <div>
              <el-tabs v-model="paramFromName" :stretch="true" style="height: 100%">
                <el-tab-pane label="请求头上信息" name="headerParam">
                  <api-params-register ref="apiParamsPage" :paramsInfo="paramsInfo" scroll-height="60vh"/>
                </el-tab-pane>
                <el-tab-pane label="请求url上信息" name="urlParam">
                  <api-params-register ref="apiParamsPage2" :paramsInfo="paramsInfo2" scroll-height="60vh"/>
                </el-tab-pane>
                <el-tab-pane label="请求体信息" name="bodyParam">
                  <api-params-register ref="apiParamsPage3" :paramsInfo="paramsInfo3" scroll-height="60vh"/>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-tab-pane>
          <el-tab-pane label="出参信息" name="resInfo" style="height:600px">

            <api-params-register ref="apiParamsPage6" :paramsInfo="paramsInfo6" scroll-height="60vh"/>
            <!--
            <div>
              <el-tabs v-model="paramFromName2" :stretch="true" style="height: 100%">
                <el-tab-pane label="请求头上信息" name="headerParam2">
                  <api-params-register ref="apiParamsPage4" :paramsInfo="paramsInfo4" scroll-height="60vh"/>
                </el-tab-pane>
                <el-tab-pane label="请求url上信息" name="urlParam2">
                  <api-params-register ref="apiParamsPage5" :paramsInfo="paramsInfo5" scroll-height="60vh"/>
                </el-tab-pane>
                <el-tab-pane label="请求体信息" name="bodyParam2">
                  <api-params-register ref="apiParamsPage6" :paramsInfo="paramsInfo6" scroll-height="60vh"/>
                </el-tab-pane>
              </el-tabs>
            </div>-->
          </el-tab-pane>
          <el-tab-pane label="接口文档" name="interfaceDocument" style="height:600px">
            <div>
              <zh-form-upload
                  :disabled="props.displayFlag"
                  prop="appAppendixList"
                  label="附件"
                  ref="uploadRef"
                  type="file"
                  fileTypes="docx,txt,pdf"
                  :limit="1"
                  limitDesc="上传文件类型仅限docx,txt,pdf"
                  drag
                  multiple
                  v-model:file-list="item.appAppendixList"
                  @before-upload="beforeUpload"
                  @on-change="onUpload"
                  :span="24"
              />
            </div>
          </el-tab-pane>
        </el-tabs>
      </zh-card>
    </div>
</template>
<script lang="ts" setup name="apiInfo">
import ApiForm from '@/views/apiCenter/ApiManager/component/ApiForm.vue';
import ApiParamsRegister from '@/views/apiCenter/ApiRegister/component/ApiParamsForm.vue';

  const activeName = ref('baseInfo');
  const apiBasePage = ref();

  //入参信息判断
  const apiParamsPage = ref();
  const apiParamsPage2 = ref();
  const apiParamsPage3 = ref();
  const apiParamsPage4 = ref();
  const apiParamsPage5 = ref();
  const apiParamsPage6 = ref();

  const paramFromName = ref('headerParam');
//判断当前页面是否可编辑
const props = defineProps({
  displayFlag: {
    type: Boolean,
    default:true
  },
});

  //传子组件参数
  const paramsInfo =ref({
    paramId:'',
    paramFrom:'header',
    paramType:'req',
    functionCode:'',
    displayFlag:props.displayFlag,
  });
  const paramsInfo2 =ref({
    paramId:'',
    paramFrom:'params',
    paramType:'req',
    functionCode:'',
    displayFlag:props.displayFlag,
  });
  const paramsInfo3 =ref({
    paramId:'',
    paramFrom:'body',
    paramType:'req',
    functionCode:'',
    displayFlag:props.displayFlag,
  });

  const paramsInfo6 =ref({
    paramId:'',
    paramFrom:'body',
    paramType:'res',
    functionCode:'',
    displayFlag:props.displayFlag,
  });

  //文件上传相关内容
  let item = reactive({
    appAppendixList: [] as Array<string>,
    appAppendixListTemp: [] as Array<any>,
  });

  const state = reactive({
    apiInfo: null as any,
  });

  //传递类型
  // 文件上传的回调
  const onUpload = (uploadFiles: any) => {
    item.appAppendixListTemp.push({
      showId: uploadFiles[uploadFiles.length - 1].showId,
      name: uploadFiles[uploadFiles.length - 1].name,
    });
  };
  // 文件上传类型控制
  const beforeUpload = (rawFile: any) => {
    console.log('____________rawFile = ', rawFile);
  };



  function apiUpdate() {
    //表单验证
    apiBasePage.value.form.validate((valid) => {
      if (valid) {
        const functionData: any = apiBasePage.value.apiInfo;
        if (functionData.logFlag) {
          functionData.logFlag = '1';
        } else {
          functionData.logFlag = '0';
        }
        if (functionData.rollbackFlag) {
          functionData.rollbackFlag = '1';
        } else {
          functionData.rollbackFlag = '0';
        }
        if (functionData.auditFlag) {
          functionData.auditFlag = '1';
        } else {
          functionData.auditFlag = '0';
        }
        if (functionData.spanRollbackFlag) {
          functionData.spanRollbackFlag = '1';
        } else {
          functionData.spanRollbackFlag = '0';
        }
        if (functionData.funcId) {
          setTimeout(() => {
            $api.common.send.post('function0005',functionData)
                .then((res) => {
                  $messageBox.success('修改成功', '提示');
                  apiBasePage.value.setInitDate(res.result);
                  state.apiInfo = apiBasePage.value.functionInfo;
                })
                .catch(() => {
                });
          }, 10);
        }
      }
    });
  }

  //根目录新增
  function apiRootAdd() {
    if(activeName.value == 'reqInfo'){
      if (paramFromName.value == 'headerParam') {
        apiParamsPage.value.apiRootAdd();
      } else if (paramFromName.value == 'urlParam') {
        apiParamsPage2.value.apiRootAdd();
      } else if (paramFromName.value == 'bodyParam') {
        apiParamsPage3.value.apiRootAdd();
      }
    }

    if (activeName.value == 'resInfo'){
      apiParamsPage6.value.apiRootAdd();
    }
  }
  //同级新增
  function apiEqualAdd(){

    if(activeName.value == 'reqInfo'){
      if (paramFromName.value == 'headerParam') {
        apiParamsPage.value.apiEqualAdd();
      } else if (paramFromName.value == 'urlParam') {
        apiParamsPage2.value.apiEqualAdd();
      } else if (paramFromName.value == 'bodyParam') {
        apiParamsPage3.value.apiEqualAdd();
      }
    }

    if (activeName.value == 'resInfo'){
      apiParamsPage6.value.apiEqualAdd();
    }
  }
  //子集新增
  function childApiAdd(){

    if(activeName.value == 'reqInfo'){
      if (paramFromName.value == 'headerParam') {
        apiParamsPage.value.childApiAdd();
      } else if (paramFromName.value == 'urlParam') {
        apiParamsPage2.value.childApiAdd();
      } else if (paramFromName.value == 'bodyParam') {
        apiParamsPage3.value.childApiAdd();
      }
    }
    if (activeName.value == 'resInfo'){
      apiParamsPage6.value.childApiAdd();
    }
  }
  //保存修改
  function saveApi(){

    if(activeName.value == 'reqInfo'){
      if (paramFromName.value == 'headerParam') {
        apiParamsPage.value.saveApi();
      } else if (paramFromName.value == 'urlParam') {
        apiParamsPage2.value.saveApi();
      } else if (paramFromName.value == 'bodyParam') {
        apiParamsPage3.value.saveApi();
      }
    }
    if (activeName.value == 'resInfo'){
      apiParamsPage6.value.saveApi();
    }
  }
  //删除节点
  function deleteApiParams(){

    if(activeName.value == 'reqInfo'){
      if (paramFromName.value == 'headerParam') {
        apiParamsPage.value.deleteApi();
      } else if (paramFromName.value == 'urlParam') {
        apiParamsPage2.value.deleteApi();
      } else if (paramFromName.value == 'bodyParam') {
        apiParamsPage3.value.deleteApi();
      }
    }
    if (activeName.value == 'resInfo'){
      apiParamsPage6.value.deleteApi();
    }
  }

function initInfo(funcId,displayFlag){
  state.displayFlag = displayFlag;
  nextTick(()=>{
    //添加子页面的树参数，并初始化
    paramsInfo.value.functionCode = funcId;
    paramsInfo2.value.functionCode =funcId;
    paramsInfo3.value.functionCode =funcId;
    paramsInfo6.value.functionCode =funcId;
    nextTick(()=>{
      apiParamsPage.value.initParams();
      apiParamsPage2.value.initParams();
      apiParamsPage3.value.initParams();
      apiParamsPage6.value.initParams();
    });

    const params = {
      funcId: funcId,
    };
    $api.common.send.post('function0002',params).then((res) => {
      state.apiInfo = res.result;
      // 赋值子组件信息
      apiBasePage.value.setInitDate(res.result);
    }).catch(() => {});
  });
}

  //------------设置给父组件调用的数据/方法(组件)-----------
  defineExpose({initInfo});

</script>

